<template>
    <div class="Index">
        <!--导航栏引入-->
        <Nav></Nav>
        <div class="main_content">
            <!--左边-->
            <div>
                <el-card class="box-card-left">
                    <div>
                        <span style="font-size: 10px;color: gray">个人中心</span>
                    </div>
                    <el-divider></el-divider>
                    <!--用户名-->
                    <div class="user_name" style="text-align: center;font-size: 10px;color: gray">
                        <span>用户名称：{{user.username}}</span>
                    </div>
                    <!--注册时间-->
                    <div class="user_create_time"
                         style="text-align: center;font-size: 10px;color: gray;margin-top: 5px">
                        <span>注册时间：<i style="font-size: 10px;color: gray" class="el-icon-time"></i>{{user.createTime}}</span>
                    </div>
                    <el-divider></el-divider>
                    <br>
<!--                    &lt;!&ndash;性别&ndash;&gt;-->
<!--                    <div>-->
<!--                        <div class="user_name" style="text-align: center;font-size: 15px;color: gray;">-->
<!--                            <div v-if="user.sex==1"><span>用户性别：男</span></div>-->
<!--                            <div v-else><span>用户性别：女</span></div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <br>-->
                    <!--角色权限-->
                    <div>
                        <div class="user_name" style="text-align: center;font-size: 15px;color: gray;">
                            <div v-if="user.roleId==1"><span>角色权限：管理员</span></div>
                            <div v-else><span>角色权限：普通用户</span></div>
                        </div>
                    </div>
                    <br>
                    <!--手机号-->
                    <div>
                        <div class="user_name" style="text-align: center;font-size: 15px;color: gray">
                            <span v-if="!user.phone">联系方式：<i style="color: red">未填写</i></span>
                            <span v-else>联系方式：{{user.phone}}</span>
                        </div>
                    </div>
                    <br>
                    <!--所属地址-->
                    <div>
                        <div class="user_name" style="text-align: center;font-size: 15px;color: gray;">
                            <span v-if="!user.address">所属地址：<i style="color: red">未填写</i></span>
                            <span v-else>所属地址：{{user.address}}</span>
                        </div>
                    </div>
                    <!--邮箱地址-->
                    <br>
                    <div>
                        <div class="user_name" style="text-align: center;font-size: 15px;color: gray;">
                            <span v-if="!user.email">邮箱地址：<i style="color: red">未填写</i></span>
                            <span v-else>邮箱地址：{{user.email}}</span>
                        </div>
                    </div>
                </el-card>
            </div>
            <!--右边-->
            <div>
                <el-card class="box-card-right">
                    <div>
                        <span style="font-size: 10px;color: gray">修改资料</span>
                    </div>
                    <el-divider></el-divider>
                    <!--用户昵称-->
                    <div>
                        <div style="margin-left:10%;height: 560px;width: 80%;border-radius: 20px;"
                             class="hotel_form">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                                     class="demo-ruleForm">
                                <el-form-item label="用户名称：" prop="username">
                                    <el-input v-model="ruleForm.username"></el-input>
                                </el-form-item>
                                <el-form-item label="用户密码：" prop="password">
                                    <el-input v-model="ruleForm.password" show-password></el-input>
                                </el-form-item>
                                <el-form-item label="联系方式：" prop="phone">
                                    <el-input v-model="ruleForm.phone"></el-input>
                                </el-form-item>
                                <el-form-item label="所属地址：" prop="address">
                                    <el-input v-model="ruleForm.address"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱地址：" prop="email">
                                    <el-input v-model="ruleForm.email"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('ruleForm')">修&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;改</el-button>
                                    &nbsp;&nbsp;&nbsp;
                                    <el-button @click="resetForm('ruleForm')">重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    import Nav from '../components/Nav'

    export default {
        name: "Score",
        components: {
            Nav
        },
        data() {
            var validatePass = (rule, value, callback) => {
                //必须包含⼤⼩写字母、数字、特殊字符长度再9-16位之间
                var regex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{9,16}");
                if (value === "") {
                    callback(new Error("请输⼊密码"));
                } else if (value.length < 9 || value.length > 16) {
                    callback(new Error("请输⼊9~16位密码"));
                } else if (!regex.test(value)) {
                    callback(new Error("密码必须同时包含字母、数字和特殊字符其中三项且⾄少9位"));
                } else {
                    callback();
                }
            };
            return {
                UserId: localStorage.getItem("Id"),
                value1: '',
                user: {},
                ruleForm: {},
                rules: {
                    username: [
                        {required: true, message: '请输入用户名称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: "请输入手机号码", trigger: "blur"},
                        {
                            validator: function (rule, value, callback) {
                                if (/^1[34578]\d{9}$/.test(value) == false) {
                                    callback(new Error("手机号格式错误"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    password: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {required: true, validator: validatePass, trigger: "blur"},
                    ],
                    address: [
                        {required: true, message: '请输入所属地址', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    email: [
                        {
                            required: true,
                            message: "请输入邮箱",
                            trigger: "blur"
                        },
                        {
                            validator: function (rule, value, callback) {
                                if (
                                    /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
                                        value
                                    ) == false
                                ) {
                                    callback(new Error("邮箱格式错误"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ]

                }
            };
        },
        methods: {
            /*提交信息*/
            submitForm(formName) {
                let _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 发送axios请求，根据查询一个
                        console.log(_this.ruleForm)
                        _this.ruleForm.id=localStorage.getItem("id")
                        _this.ruleForm.roleId = localStorage.getItem("RoleId")
                        _this.$axios.post('http://localhost:8088/user/updateUser', _this.ruleForm).then(function (res) {
                            _this.$message({
                                showClose: true,
                                message: '信息修改成功!',
                                type: 'success'
                            });
                            setTimeout('location.reload()', 1000);
                        }).catch(function (err) {
                            _this.$message({
                                showClose: true,
                                message: '信息修改失败!',
                                type: 'error'
                            });
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            /*计算天数的方法*/
            getDays() {
                const strDateStart = this.value1[0]
                const strDateEnd = this.value1[1]
                const strSeparator = "-";
                //日期分隔符   var oDate1;   var oDate2;
                let iDays;
                const oDate1 = strDateStart.split(strSeparator);
                const oDate2 = strDateEnd.split(strSeparator);
                const strDateS = new Date(oDate1[0], oDate1[1] - 1, oDate1[2]);
                const strDateE = new Date(oDate2[0], oDate2[1] - 1, oDate2[2]);
                this.arr = parseInt(Math.abs(strDateS - strDateE) / 1000 / 60 / 60 / 24)
                //把相差的毫秒数转换为天数
            },
            /*初始化查询当前角色信息*/
            findAll() {
                let id = localStorage.getItem("id")
                let _this = this
                this.$axios.get("http://localhost:8088/user/getUserById/" + id).then(function (res) {
                    _this.user = res.data
                    let RoleId = localStorage.setItem("RoleId",res.data.roleId)
                    // let time = res.data.createTime
                    // _this.user.createTime = this.formatDateTime(time)
                }).catch(function (err) {
                    alert('查询失败')
                })
            },
        },
        mounted() {
            this.findAll()
            window.scrollTo(0, 0)
        }
    }
</script>

<style scoped>
    .main_content {
        padding-top: 5%;
        float: left;
        width: 100%;
    }

    .box-card-left {
        float: left;
        margin-left: 20%;
        width: 300px;
        height: 450px;
    }

    .box-card-right {
        float: left;
        margin-left: 1%;
        width: 650px;
        height: 450px;
    }
</style>
